<template>
  <view class="mz-upload">
    <wd-upload
      :file-list="fileList"
      :action="action"
      @change="handleChange"
      :limit="limit"
      custom-evoke-class="upload"
      multiple
      reupload
      image-mode="aspectFill"
    >
      <template #default>
        <!-- 图标插槽 trigger -->
        <slot name="trigger">
          <wd-icon name="add" :size="iconSize" class="custom-upload-icon"></wd-icon>
        </slot>
        <view class="upload-count">{{ fileList.length }}/{{ limit }}</view>
      </template>
    </wd-upload>
  </view>
</template>

<script lang="ts" setup>
interface Props {
  fileList: any[]
  action: string
  limit?: number
  iconSize?: string
}

const props = withDefaults(defineProps<Props>(), {
  limit: 3, //默认限制上传图片数量，可修改
  iconSize: '26rpx',
})

const emit = defineEmits<{
  (e: 'update:fileList', value: any[]): void
}>()

const fileList = ref(props.fileList)

watch(
  () => props.fileList,
  (newVal) => {
    fileList.value = newVal
  },
)

const handleChange = (event: any) => {
  fileList.value = event.fileList
  emit('update:fileList', fileList.value)
}
</script>

<style lang="scss" scoped>
.mz-upload {
  :deep(.upload) {
    position: relative;
    width: 156rpx;
    height: 156rpx;
    overflow: hidden;
    background: #fafafa;
    border-radius: 32rpx;
    border-radius: 31rpx 31rpx 31rpx 31rpx;
    .wd-icon-fill-camera {
      display: none;
    }
    .custom-upload-icon {
      position: absolute;
      top: 40%;
      left: 50%;
      color: #acacac;
      transform: translate(-50%, -50%);
    }
    .wd-upload__evoke-num {
      display: none;
    }
    .upload-count {
      position: absolute;
      top: 65%;
      left: 50%;
      color: #acacac;
      transform: translate(-50%, -50%);
    }
  }
  :deep(.wd-upload__picture) {
    border-radius: 32rpx;
  }
}
</style>
